<template>
	<view class="repair-detail-page">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="nav-title">维修记录</text>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">○</text>
			</view>
		</view>
		
		<!-- 核销码区域 -->
		<view class="verify-code-section" v-if="orderDetail.status === 'inProgress'">
			<view class="verify-code-card">
				<text class="verify-code-label">核销码: {{ orderDetail.verifyCode }}</text>
				<view class="qr-code-wrapper">
					<image :src="qrCodeUrl" class="qr-code" mode="aspectFit" />
				</view>
			</view>
		</view>
		
		<!-- 维修信息 -->
		<view class="info-section">
			<view class="section-title">维修信息</view>
			<view class="info-item">
				<text class="info-label">维修单号:</text>
				<text class="info-value">{{ orderDetail.repairNo }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">维修状态:</text>
				<text class="info-value status" :class="getStatusClass(orderDetail.status)">
					{{ getStatusText(orderDetail.status) }}
				</text>
			</view>
			<view class="info-item">
				<text class="info-label">车主姓名:</text>
				<text class="info-value">{{ orderDetail.ownerName }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">联系方式:</text>
				<text class="info-value">{{ orderDetail.contact }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">维修方式:</text>
				<text class="info-value">{{ orderDetail.repairMethod }}</text>
			</view>
			<view class="info-item" v-if="orderDetail.repairMethod === '上门取车'">
				<text class="info-label">取车位置:</text>
				<text class="info-value">{{ orderDetail.pickupLocation }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">预约日期:</text>
				<text class="info-value">{{ orderDetail.appointmentDate }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">提交日期:</text>
				<text class="info-value">{{ orderDetail.submitDate }}</text>
			</view>
		</view>
		
		<!-- 车辆信息 -->
		<view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-item">
				<text class="info-label">车辆类型:</text>
				<text class="info-value">{{ orderDetail.vehicleType }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">车牌号:</text>
				<text class="info-value">{{ orderDetail.licensePlate }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">整车照片:</text>
				<view class="photo-wrapper">
					<image :src="orderDetail.fullVehiclePhoto" class="vehicle-photo" mode="aspectFill" />
				</view>
			</view>
			<view class="info-item">
				<text class="info-label">维修部位照片:</text>
				<view class="photos-grid">
					<image 
						v-for="(photo, index) in orderDetail.repairPhotos" 
						:key="index"
						:src="photo" 
						class="repair-photo" 
						mode="aspectFill" 
					/>
				</view>
			</view>
		</view>
		
		<!-- 取消订单按钮（仅进行中状态显示） -->
		<view class="action-bar" v-if="orderDetail.status === 'inProgress'">
			<view class="cancel-btn" @click="showCancelDialog">取消订单</view>
		</view>
		
		<!-- 取消订单确认弹窗 -->
		<view class="cancel-dialog-overlay" v-show="showCancelDialogOverlay" @click="hideCancelDialog">
			<view class="cancel-dialog-content" @click.stop>
				<view class="dialog-title">确认取消预约么?</view>
				<view class="dialog-buttons">
					<view class="dialog-btn cancel-btn-dialog" @click="hideCancelDialog">取消</view>
					<view class="dialog-btn confirm-btn-dialog" @click="confirmCancel">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCancelDialogOverlay: false, // 取消订单弹窗显示状态
				orderDetail: {
					repairNo: '3535252',
					status: 'inProgress', // inProgress: 进行中, completed: 已完成, cancelled: 已取消
					verifyCode: 'WE343235V',
					ownerName: '张',
					contact: '1993829282',
					repairMethod: '上门取车',
					pickupLocation: '山阳区32号',
					appointmentDate: '2022/11/10 11:00',
					submitDate: '2022/11/08 12:34',
					vehicleType: '大客车',
					licensePlate: '豫J45323',
					fullVehiclePhoto: '/static/tx1.jpg',
					repairPhotos: [
						'/static/tx1.jpg',
						'/static/tx1.jpg',
						'/static/tx1.jpg'
					]
				},
				qrCodeUrl: '/static/tx1.jpg' // 二维码图片，实际应该根据核销码生成
			}
		},
		onLoad(options) {
			// 从上一页传递的订单数据
			if (options.orderData) {
				try {
					const orderData = JSON.parse(decodeURIComponent(options.orderData));
					// 合并订单数据
					this.orderDetail = {
						...this.orderDetail,
						...orderData
					};
				} catch (e) {
					console.error('解析订单数据失败', e);
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 显示取消订单弹窗
			showCancelDialog() {
				this.showCancelDialogOverlay = true;
			},
			// 隐藏取消订单弹窗
			hideCancelDialog() {
				this.showCancelDialogOverlay = false;
			},
			// 确认取消订单
			confirmCancel() {
				// 更新订单状态为已取消
				this.orderDetail.status = 'cancelled';
				// 隐藏弹窗
				this.hideCancelDialog();
				// 显示提示
				uni.showToast({
					title: '订单已取消',
					icon: 'success',
					duration: 2000
				});
				// 可以在这里调用API取消订单
				// this.cancelOrder();
				
				// 通知上一页更新订单状态（如果需要）
				// 可以通过事件总线或全局状态管理来实现
				// 这里使用简单的页面栈通知
				const pages = getCurrentPages();
				if (pages.length > 1) {
					const prevPage = pages[pages.length - 2];
					// 如果上一页是维修列表页，可以触发刷新
					if (prevPage.route === 'pages/my/myRepair') {
						// 可以在这里调用上一页的刷新方法
						// prevPage.refreshOrderList();
					}
				}
			},
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'inProgress': '进行中',
					'completed': '已完成',
					'cancelled': '已取消'
				};
				return statusMap[status] || '未知';
			},
			// 获取状态样式类
			getStatusClass(status) {
				const classMap = {
					'inProgress': 'status-in-progress',
					'completed': 'status-completed',
					'cancelled': 'status-cancelled'
				};
				return classMap[status] || '';
			}
		}
	}
</script>

<style scoped>
	.repair-detail-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	/* 顶部导航栏 */
	.top-nav {
		background-color: #2a6df6;
		background-image: url('/static/图层 1@3x.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		color: #fff;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: #fff;
		font-size: 48rpx;
		font-weight: 300;
		line-height: 1;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.nav-icon {
		color: #fff;
		font-size: 32rpx;
	}

	/* 核销码区域 */
	.verify-code-section {
		padding: 20rpx;
	}

	.verify-code-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.verify-code-label {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.qr-code-wrapper {
		width: 400rpx;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
	}

	.qr-code {
		width: 100%;
		height: 100%;
	}

	/* 信息卡片 */
	.info-section {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
		width: 180rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.info-value.status {
		font-weight: 500;
	}

	.status-in-progress {
		color: #2a6df6;
	}

	.status-completed {
		color: #52c41a;
	}

	.status-cancelled {
		color: #ff4d4f;
	}

	/* 照片区域 */
	.photo-wrapper {
		margin-top: 10rpx;
	}

	.vehicle-photo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.photos-grid {
		display: flex;
		gap: 20rpx;
		margin-top: 10rpx;
		flex-wrap: wrap;
	}

	.repair-photo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	/* 操作按钮栏 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
	}

	.cancel-btn {
		width: 100%;
		background-color: #2a6df6;
		color: #fff;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	/* 取消订单确认弹窗 */
	.cancel-dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.cancel-dialog-content {
		background-color: #fff;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		overflow: hidden;
	}

	.dialog-title {
		text-align: center;
		padding: 60rpx 30rpx 40rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.dialog-buttons {
		display: flex;
		border-top: 1px solid #f0f0f0;
	}

	.dialog-btn {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
	}

	.cancel-btn-dialog {
		color: #666;
		border-right: 1px solid #f0f0f0;
	}

	.confirm-btn-dialog {
		color: #2a6df6;
		font-weight: 500;
	}
</style>
